<!-- Modal -->
<div class="modal fade modal-default" id="modal-template" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Template list</h3>
                <p class="text-subtitle text-muted">
                    Use the filter side bar on the right to filter and search your templates.
                </p>

            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 input-group mb-3">
                        <div class="input-group-text" id="btnGroupAddon" ng-click="$ctrl.search()">
                            <i class="mi mi-Search" style="top: 0"></i>
                        </div>
                        <input ng-model="$ctrl.request.keyword" ng-enter="$ctrl.search()" type="text"
                            class="form-control" placeholder="Search..." aria-label="Search..."
                            aria-describedby="btnGroupAddon" />
                    </div>
                </div>
                <div class="content-body py-3">
                    <section class="card mb-5">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-hover" cellspacing="0">
                                        <thead class="thead-light">
                                            <tr>
                                                <th scope="col">Template Name</th>
                                                <th scope="col">Folder path</th>
                                                <th scope="col" width="20%">Created Date</th>
                                                <th scope="col" width="5%">Actions</th>
                                            </tr>
                                        </thead>

                                        <tbody class="sortable">
                                            <tr ng-repeat="item in $ctrl.data.items track by $index"
                                                class="sortable-item" sort-model="template" sort-model-id="{{item.id}}">
                                                <td>
                                                    <small ng-bind="item.fileName"></small>
                                                </td>
                                                <td>
                                                    <div class="input-group input-group-sm">
                                                        <input id="path-modal-{{$index}}" value="{{item.fileFolder}}"
                                                            onclick="this.select()" class="form-control form-control-sm"
                                                            readonly="readonly" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <small ng-bind="item.createdDateTime | utcToLocal"
                                                        class="text-black-50"></small>
                                                </td>
                                                <td>
                                                    <div class="btn-group btn-group-sm btn-group-sm float-end"
                                                        role="group" aria-label="Actions">
                                                        <a ng-click="$ctrl.edit(item)" class="btn btn-link">
                                                            <span class="fas fa-pen text-primary"></span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </section>
                    <div class="">
                        <paging class="small" page="$ctrl.data.page" page-size="$ctrl.data.pageSize"
                            total="$ctrl.data.totalItems" ul-class="pagination justify-content-end m-0"
                            a-class="page-link" paging-action="$ctrl.search(page-1)" scroll-top="true"></paging>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>